<template>
    <el-form :inline="true" :model="formData">
        <el-form-item label="id">
            <el-input v-model="formData.id" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-date-picker v-model="formData.productName" />
        </el-form-item>
        <el-form-item label="版本号">
            <el-input v-model="formData.version" placeholder="请输入关键字" clearable />
        </el-form-item>
    </el-form>
    <el-divider />

    <el-table :data="wms_store.poItems">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column prop="productId" label="商品编号" width="80" />
        <el-table-column prop="shelfId" label="货架Id" width="100" />
        <el-table-column prop="productName" label="名称" width="100" />
        <el-table-column prop="qty" label="批次库存量" width="80" />
        <el-table-column  label="生产日期" width="170">
            <template #default="scope">
                <el-date-picker v-model="scope.row.productionDate" type="date" placeholder="选择日期"
                    style="width: 100%;"></el-date-picker>
            </template>
        </el-table-column>
        <el-table-column  label="保质期(天)" width="220">
            <template #default="scope">
                <el-input-number v-model="scope.row.shelfLife" :min="0" size="small"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="过期日期" width="170">
            <template #default="scope">
                <el-date-picker v-model="scope.row.expiryDate" type="date" placeholder="选择日期"
                    style="width: 100%;"></el-date-picker>
            </template>
        </el-table-column>
        
    </el-table>
    <el-divider />
    <el-button type="primary" @click="onAdd">新建入库单</el-button>
</template>

<script setup lang="ts">
import {  onMounted, reactive } from 'vue'
import { dayjs, ElMessage, } from 'element-plus'
import { wmsStore } from '@/store/pinia'
import { inventoryBatchApi, inventoryinApi, poApi } from '@/api'

const wms_store = wmsStore()


const formData = reactive({
    vendorId: "",
    id: "",
    productName: "",
    version: "",
})


onMounted(() => {

    poApi.select({
        vendorId: formData.vendorId,
        id: formData.id,
        productName: formData.productName,
        version: formData.version,
    }).then((res: any) => {
        wms_store.poItems = res.data
    })
})






const onAdd = () => {
    inventoryinApi.insert({
        
        id: formData.id,
        productName: formData.productName,
        version: formData.version,


    }).then((res: any) => {
        ElMessage.success('成功')
        wms_store.poItems = []
    })
}




</script>


<style scoped>
.img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
</style>